<template>
  <el-drawer
    :visible.sync="dwVisible"
    :show-close="showClose"
    :size="size"
    :wrapper-closable="modal"
    :modal-append-to-body="modalAppendToBody"
    :close-on-click-modal="closeOnClickModal"
    :destroy-on-close="true"
    :with-header="withHeader"
    :modal="hasModal"
    :direction="direction"
    @close="ddtCloseBefore">
    <!-- :style="{'height': height}" -->
    <div class="ddt-wrap">
      <div class="ddt-main">
        <!-- <div class="bottomBox">
          <i class="el-icon-close fs-20" @click="handleClose"></i>
        </div> -->
        <slot></slot>
      </div>
    </div>
    <div class="main-box">
      <slot></slot>
    </div>
  </el-drawer>
</template>

<script>
export default {
  name: 'Dialogdrawerdefect',
  props: {
    closeOnClickModal: {
      type: Boolean,
      default: true
    },
    withHeader: {
      type: Boolean,
      default: false
    },
    showClose: {
      type: Boolean,
      default: false
    },
    direction: {
      type: String,
      default: 'btt'
    },
    ddtvisible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    modal: {
      type: Boolean,
      default: true
    },
    top: {
      type: String,
      default: '50px'
    },
    size: {
      type: String,
      default: '500px'
    },
    close: {
      type: Boolean,
      default: false
    },
    modalAppendToBody: {
      type: Boolean,
      default: true
    },
    hasModal: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    height() {
      if (this.direction === 'rtl') {
        return '100%'
      } else if (this.direction === 'btt') {
        return '300px'
      } else {
        return '100%'
      }
    },
    dwVisible: {
      get() {
        return this.ddtvisible
      },
      set(val) {
        this.$emit('update:ddtvisible', val)
      }
    },
    // 距离顶部的距离计算
    ddtWrapStyleObj() {
      if (this.top) {
        return {
          height: `calc(100vh - ${this.top})`
        }
      } else {
        return {}
      }
    }
  },
  methods: {
    handleClose() {
      this.$emit('close')
    },
    // 遮罩层点击
    ddtCloseBefore() {
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss" scoped>
.main-box{
  position: relative;
  height: 100%;
  overflow-y: scroll;background-color: #f5f6fa;border-top: solid 1px #e5e5e5;
}
.ddt-wrap{
  width: 100%;
  height: 100%;
  background-color: #fff;
  position: absolute;
  box-sizing: border-box;
  right: 0;
  bottom: 0;
  z-index: 101;
  display: flex;
  flex-direction: column;
  pointer-events: all;
}
.ddt-title{
  display: flex;
  align-items: center;
  padding: 15px;
  width: 100%;
  line-height: 18px;
  font-size: 16px;
  .tit{
    flex: 1;
  }
  .close{
    font-size: 18px;
    color: #666;
    cursor: pointer;
    &:hover{
      opacity: #333;
    }
  }
}
.ddt-main{
  flex: 1;
  overflow-y: auto;
  pointer-events: all;
  height: 100%;
}
.bottomBox{
  position: absolute;
  right: 10px;
  top: 10px;
}
</style>
